<template>
  <div class="PersonalExpenses">
		
		<el-button primary @click="addInit">生活缴费</el-button>
		<el-button primary @click="checkReport">账户信息</el-button>
		<p></p>
		
     <el-table :data="tableData" style="width: 100%" 
			:stripe="true" ref="multipleTable"
		    @selection-change="handleSelectionChange"
		    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
		 >
	<el-table-column  label="费用清单"  width="90" align = "center">
        <el-table-column prop="function" label="功能服务"  width="90" align = "center" />
        <el-table-column prop="cost" label="费用明细"   align = "center"/>
        <el-table-column prop="source" label="服务来源"   width="90" align = "center"/>
	</el-table-column>

	  </el-table>
	  
		  <el-pagination
		    small
		    background
		    layout="prev, pager, next"
			:page-size="pageSize"
		    :page-count="pageCount"
			:current-page="currentPage"
			@current-change="haddlePageChange"
		  />
	
	  
	  <!-- 增加对话框 -->
	  <el-dialog v-model="dialogVisible" title="生活缴费" width="35%" draggable>
	        <!-- <span>增加</span> -->
	  	  <el-form :model="form" label-width="80px" :rules="formRules"  class="demo-ruleForm">
			  
			  <el-form-item label="学号" prop="number">
			    <el-input v-model="form.number" />
			  </el-form-item>
			  <el-form-item label="姓名" prop="name">
			    <el-input v-model="form.name" />
			  </el-form-item>
	  	      <el-form-item label="校园卡充值金额" prop="school_rem">
	  	        <el-input v-model="form.school_rem" />
	  	      </el-form-item>
			  <el-form-item label="住宿充值金额" prop="dorm_exp">
			    <el-input v-model="form.dorm_exp" />
			  </el-form-item>
			   <el-form-item label="挂失状态">
			      <el-select v-model="form.disapp_sta" placeholder="请选择状态">
			        <el-option label="是" value="yes"></el-option>
			        <el-option label="否" value="no"></el-option>
			      </el-select>
			    </el-form-item>
	  	   </el-form>
	        <template #footer>
	          <span class="dialog-footer">
	            <el-button @click="dialogVisible = false">取消</el-button>
	            <el-button type="primary" @click="addSubmit()">提交</el-button
	            >
	          </span>
	        </template>
	      </el-dialog>
		  
		  <!--  待审核对话框 -->
		  <el-dialog v-model="checkreport" title="账户信息" width="60%" draggable>
			  
			  <el-input
			      v-model="keyword"
			      placeholder="请输入校园卡号"
			      class="input-with-select"
			  	style="width:50%"
			  >
			      <template #append>				
			        <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
			      </template>        
			  </el-input>
			<el-table :data="checkReportData" style="width: 100%" :stripe="true"
					 ref="multipleTable"
					    @selection-change="handleSelectionChange"
					    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
					 >
			   <el-table-column prop="name" label="姓名"  sortable width="90" align = "center"/>
					<el-table-column prop="school_rem" label="校园卡余额" sortable width="90"  align = "center"/>
					<el-table-column prop="dorm_exp" label="宿舍缴费" align = "center" />
					<el-table-column prop="disapp_sta" label="挂失状态"  align = "center"/>
			 </el-table>
			 <el-pagination small layout="prev, pager, next"
				:page-size="pageSize1"
				:page-count="pageCount1"
				:current-page="currentPages"
				@current-change="haddlePageChange1"  />
		  </el-dialog>
  </div>
</template>

<script setup>
import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'
let { proxy } = getCurrentInstance();
	//var tableData=ref([]); ref不能用于对象，所以要用reactive();
	//表格绑定的数据必须是数组类型，注意里面的对象的属性值也要和上面的列中的prop值对应
	var tableData=reactive([
	{function:'空调服务',cost:'押金300¥/年，电费1¥/度',source:'格力公司'},
	{function:'用水服务',cost:'自来水免费，直饮水0.5¥/升',source:'济南自来水厂'},
	{function:'用电服务',cost:'0.5¥/度',source:'山东省供电公司'},
	{function:'住宿费用',cost:'2000/年',source:'本校'},
	{function:'宿舍网络',cost:'10M无线网300/年，50M无线网500/年',source:'中国移动济南分公司'},
	]);
	console.log(tableData);
	var pageCount=ref(0)//总页数
	var pageSize=ref(9)
	var currentPage=ref(1)
	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("PersonalExpensesUpdate",jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	onMounted(()=>{
		getTableData()
		
	});
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();		
	}
	let dormOption=ref([]);//增加、修改中的宿舍楼下拉
	let form=ref({});//修改或增加的一个对象	
	const dialogVisible = ref(false)//增加对话框是否显示
	function addInit(){
		form.value={}
		dialogVisible.value = true
		var pageSize=ref(100000)
		
		
		var jsonparam = JSON.stringify(param) 
		
		.then(res => {
			dormOption.value=res.data.records;//下拉数据
		})
	}
	
	
	function addSubmit(){
		proxy.$http.post("/PersonalExpensesUpdate",form.value)
		.then(res => {
			console.log(res)
			dialogVisible.value = false //关闭对话框		
			getTableData();  //更新表格数据
			form.value={}  //清空增加对象
			alert(res.data.message)
		})
	}
	
	//查看报修申请的page设置
	var checkReportData=ref([]);
	const checkreport = ref(false)
	var pageCount1=ref(0)
	var pageSize1=ref(8)
	var currentPages=ref(1)
	function checkReport(){
		checkreport.value=true
		var param = { "pagination": {"pageNo":currentPages.value,"pageSize":pageSize1.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
	    proxy.$http.post("PersonalExpensesFind",jsonparam)
		.then(res => {
			checkReportData.value=res.data.records;//把获取的服务端数据数组传递给checkReportData
			//总页数
			pageCount1.value=Math.ceil(res.data.totalNum/pageSize1.value);
		})
		.catch(err => {
			console.log(err)
		});
	}
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange1(currentpages){
		currentPages.value=currentpages;
		checkReport();		
	}
	//按关键字查询
	const keyword = ref('')
	let search = () => {
		if (keyword.value == ''){
			getTableData()
			return false
		}
		var param = {
			"学号": keyword.value,
		};
		var jsonparam = JSON.stringify(param)
		proxy.$http.get("/PersonalExpensesFind" + '?学号=' + keyword.value)
			.then(res => {
				checkReportData.value = [res.data] //把获取的服务端数据数组传递给tableData
			})
			.catch(err => {
				console.log(err)
			});
	}
	
	const isNum = (rule, value, callback) => {
		const no = /^[0-9]*$/
		 if(value.length<12||value.length>12)
			callback(new Error('学号数字个数应为12'))
		else if (!no.test(value)) {
			callback(new Error('请输入数字!'))
		} else {
			callback()
		}	  

	};
	const formRules = reactive({
		no: [
			{required: true, message: '请输入学号', trigger: 'blur'},
		  {validator: isNum, trigger: 'blur'}  // validator是指用isNum方法做校验，可全部都用方法校验
		],
		name: [
		  {required: true, message: '请输入姓名', trigger: 'blur'},
		  {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
		],
		report_reason:[
			{required: true, message: '请输入报修原因', trigger: 'blur'},
		  {min: 1, max: 50, message: '请保持在50个字符以内', trigger: 'blur'}
		],
		report_time:[
			{required: true, message: '请选择报修时间', trigger: 'blur'},
		],
	})


</script>
//分页居中显示
<style scoped>
  .el-pagination {
    justify-content: center;
  }
</style>